<template>
  <div class="JobManagement">
    <NavBar fixed placeholder title="作业管理" z-index="999" ref="nav">
      <template #left>
        <Icon
          name="arrow-left"
          size="0.53rem"
          color="#000"
          @click="$router.push('/')"
        />
      </template>
    </NavBar>
    <div class="placeholder"></div>
    <div class="main">
      <div
        class="item"
        @click="toJump(item)"
        v-for="(item, i) in list"
        :key="i"
      >
        <!-- <img src="@/assets/img/ic1.png" alt="" /> -->
        <img :src="item.photo" alt="" />
        <span>{{ item.title }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import slider0 from "assets/img/ic1.png";
import slider1 from "assets/img/ic2.png";
import slider2 from "assets/img/ic3.png";
import slider3 from "assets/img/ic4.png";
import slider4 from "assets/img/ic5.png";
import slider5 from "assets/img/ic6.png";
import slider6 from "assets/img/ic7.png";
import slider7 from "assets/img/ic8.png";
import {
  Image as VanImage,
  Uploader,
  Popup,
  NavBar,
  Icon,
  Field,
  Cell,
  List,
  Button,
} from "vant";
export default {
  props: {},
  data() {
    return {
      name: "1",
      location: "2",
      describe: "3",
      user: "4",
      phone: "5",
      list: [
        {
          title: "动火作业",
          photo: slider0,
          dgwkName: "dgwkFireWork",
          codeA: "DgwkFireWork-dfwRiskAnaly", //风险分析
          codeB: "DgwkFireWork-dfwSafe", //安全措施确认
        },
        { title: "动土作业", photo: slider1, dgwkName: "dgwkBreakGround" },
        {
          title: "受限空间作业",
          photo: slider2,
          dgwkName: "dgwkSpaceWork",
          codeA: "DgwkSpaceWork-dswRaskAnaly",
          codeB: "DgwkSpaceWork-dswSafe",
        },
        {
          title: "吊装作业",
          photo: slider3,
          dgwkName: "dgwkHoisteOperation",
          codeA: "DgwkHoisteOperation-dhoRiskAnaly",
          codeB: "DgwkHoisteOperation-dhoSafe",
        },
        {
          title: "临时用电",
          photo: slider4,
          dgwkName: "dgwkTemporaryElectricity",
          codeA: "DswkTempElec-dteRaskAnaly",
          codeB: "DswkTemporaryElectricity-dteSafe",
        },
        {
          title: "高处作业",
          photo: slider5,
          dgwkName: "dgwkHeightWork",
          codeA: "DgwkHeightWork-dhwRiskAnaly",
          codeB: "DgwkHeightWork-dhwSafe",
        },
        {
          title: "断路作业",
          photo: slider6,
          dgwkName: "dgwkBreakWay",
          codeC: "DgwkBreakWay-dbwRiskAnaly",
        },
        {
          title: "涉水作业",
          photo: slider7,
          dgwkName: "dgwkIntoWater",
          codeB: "DgwkIntoWater-diwSafe",
        },
      ],
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    toJump(item) {
      let query = {
        icoNo: item.title,
        dgwkName: item.dgwkName,
      };
      if (item.codeA) {
        query.codeA = item.codeA;
      }
      if (item.codeB) {
        query.codeB = item.codeB;
      }
      if (item.codeC) {
        query.codeC = item.codeC;
      }
      this.$router.push({
        name: "JobDetails",
        query,
      });
    },
  },
  components: {
    VanImage,
    Uploader,
    Button,
    Popup,
    NavBar,
    Icon,
    Field,
    Cell,
    List,
  },
};
</script>

<style scoped lang="less">
* {
  box-sizing: border-box;
}
.JobManagement {
  background-color: #fff;
  .flex {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  background-color: #f7f7f9;
  // /deep/.van-nav-bar__content {
  //   background-color: #3982f6;

  //   .van-nav-bar__title {
  //     color: #fff;
  //   }
  // }
  .placeholder {
    width: 100%;
    height: 30px;
    background-color: #f7f7f9;
    // background-color: red;
  }
  .main {
    width: 100%;
    background-color: #fff;
    padding: 20px;
    // box-sizing: border-box;
    .item {
      width: 100%;
      height: 150px;
      border: 1px solid #dddddd;
      border-radius: 5px;
      margin: 25px 0;
      padding: 20px;
      display: flex;
      align-items: center;
      img {
        width: 100px;
        height: 100px;
        // border: 1px solid red;
      }
      span {
        margin-left: 40px;
      }
    }
  }
}
</style>
